<template>
  <a-modal
    v-model:visible="visible"
    :title="null"
    :footer="null"
    :closable="false"
    :maskClosable="true"
    :width="400"
    class="cart-modal"
    @cancel="closeModal"
  >
    <div class="cart-modal-content">
      <div class="success-icon">
        <CheckCircleOutlined style="font-size: 48px; color: #52c41a;" />
      </div>
      <h3>已添加到购物车</h3>
      <div class="product-info">
        <img :src="product.image" :alt="product.name" class="product-image" />
        <div class="product-details">
          <div class="product-name">{{ product.name }}</div>
          <div class="product-price">{{ useCurrency.currentCurrency.unit }}{{ proxy.$ConvertPrice(product.price, false, false) }}</div>
          <div class="selected-options">
            <div v-if="product.selectedColor">颜色: {{ product.selectedColor }}</div>
            <div v-if="product.selectedSize">尺码: {{ product.selectedSize }}</div>
          </div>
        </div>
      </div>
      <div class="modal-actions">
        <a-button type="primary" @click="goToCart">查看购物车</a-button>
        <a-button @click="closeModal">继续购物</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useCurrencyStore } from '@/store';
import { CheckCircleOutlined } from '@ant-design/icons-vue';

const router = useRouter();
const { proxy } = getCurrentInstance();
const useCurrency = useCurrencyStore();
const visible = ref(false);

const props = defineProps({
  product: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['close']);

const closeModal = () => {
  visible.value = false;
  emit('close');
};

const goToCart = () => {
  router.push('/cart');
  closeModal();
};

// 暴露方法给父组件
defineExpose({
  show: () => visible.value = true,
  hide: () => visible.value = false
});
</script>

<style scoped>
.cart-modal {
  :deep(.ant-modal-content) {
    padding: 24px;
  }
}

.cart-modal-content {
  text-align: center;
  
  .success-icon {
    margin-bottom: 16px;
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 24px;
  }
  
  .product-info {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 4px;
    
    .product-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
    }
    
    .product-details {
      text-align: left;
      flex: 1;
      
      .product-name {
        font-size: 14px;
        margin-bottom: 8px;
      }
      
      .product-price {
        color: #ff4d4f;
        font-weight: bold;
        margin-bottom: 8px;
      }
      
      .selected-options {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .modal-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    
    button {
      min-width: 120px;
    }
  }
}
</style> 